<template>
  <div>
    <!--顶部按钮-->
    <div>
      <el-form ref="form" inline>
        <el-form-item>
          <el-button type="primary" size="large" icon="el-icon-plus" @click="dialogTableVisible = true">新增</el-button>
        </el-form-item>
       <div style="float: right;">
         <el-form-item>
           <el-input v-model="keyword" placeholder="请输入"></el-input>
         </el-form-item>
         <el-form-item>
           <el-button type="primary" @click="search">搜素</el-button>
         </el-form-item>
       </div>
      </el-form>
    </div>
    <!--主体表格-->
    <el-table :data="userList" style="width: 100%" v-loading="loading">
      <el-table-column align="center" prop="name" label="姓名" width="180" ></el-table-column>
      <el-table-column align="center" prop="age" label="年龄" width="180"></el-table-column>
      <el-table-column align="center" prop="sex" label="性别"></el-table-column>
      <el-table-column align="center" prop="birth" label="出生日期"></el-table-column>
      <el-table-column align="center" prop="addr" label="地址"></el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="{row,$index}">
          <el-button size="mini" @click="editUser(row)">编辑</el-button>
          <el-popconfirm :title="`确定删除${row.name}吗？`" @confirm="deleteUser(row)">
            <el-button  slot="reference" size="mini" type="danger">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!--分页器-->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        align="center"
        :current-page="page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
    <!--对话框-->
    <el-dialog :title="userInfo.id?'编辑用户':'新增用户'" @close="cancel" :visible.sync="dialogTableVisible">
      <el-form :model="userInfo" inline :rules="rules" ref="form">
        <el-form-item label="姓名" label-width="80" prop="name">
          <el-input v-model="userInfo.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="年龄" label-width="80" prop="age">
          <el-input v-model="userInfo.age" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地址" label-width="80" prop="addr">
          <el-input v-model="userInfo.addr" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" label-width="80" prop="sex">
          <el-select v-model="userInfo.sex" placeholder="性别">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="出生日期" label-width="80" prop="birth">
          <el-date-picker format="yyyy-MM-dd" type="date" placeholder="选择日期" v-model="userInfo.birth" style="width: 100%;"></el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="addOrUpdateUser">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "index",
  data(){
    return{
      //关键字搜索
      keyword:'',
      //用户列表
      userList:[],
      //分页器
      total:0,
      page:1,
      limit:10,
      //打开dialog
      dialogTableVisible:false,
      loading:true,
      //用户信息
      userInfo:{
        name:'',
        age:'',
        sex:'',
        birth:'',
        addr:'',
      },
      //表单验证
      rules: {
        name: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 0, max: 20, message: '长度在 0 到 20 个字符', trigger: 'blur' }
        ],
        age: [
          { required: true, message: '请输入年龄', trigger: 'blur' }
        ],
        sex: [
          { required: true, message: '请选择性别', trigger: 'blur' }
        ],
        birth: [
          { required: true, message: '请选择时间', trigger: 'change' }
        ],
        addr: [
          { required: true, message: '请至少选择一个地址', trigger: 'blur' }
        ],
      }
    }
  },
  mounted() {
    this.getUser();
  },
  methods:{
    async getUser(){
      let params = this.keyword?{page:this.page,limit:this.limit,name:this.keyword}:{page:this.page,limit:this.limit}
      let res = await this.$API.getUser(params)
      this.loading = false
      this.total = res.count
      this.userList = res.list
    },
    //改变每页的数量
    handleSizeChange(size){
      this.limit = size
      this.getUser()
    },
    //页面切换
    handleCurrentChange(page){
      this.page = page
      this.getUser();
    },
    //删除用户
    deleteUser(row){
      this.$API.deleteUser({id: row.id})
      this.$message('删除成功')
      this.getUser()
    },
    //增加/更新用户
    addOrUpdateUser(){
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          await this.$API.addUser(this.userInfo)
          this.$message(`${this.userInfo.id?'修改':'添加'}成功`)
          this.dialogTableVisible = false
          await this.getUser()
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    //打开编辑页面
    editUser(row){
      this.userInfo = row
      this.dialogTableVisible = true
    },
    //取消
    cancel(){
      this.dialogTableVisible = false
      this.userInfo = {
        name:'',
        age:'',
        sex:'',
        birth:'',
        addr:'',
      }
      //清除验证信息
      this.$nextTick(()=>{
        this.$refs.form.clearValidate()
      })
    },
    //搜索
    search(){
      this.getUser()
    }
  }
}
</script>

<style scoped>

</style>
